<template>
  <div>
    <!-- Tips组件 -->
    <Tips />

    <!-- 每一项商品 -->
    <van-checkbox-group v-model="result">
      <van-checkbox
        :disabled="isEditing"
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="goodsItemClick(item)"
      >
        <van-card
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        />
        <van-stepper v-model="value" v-show="isEditing" />
      </van-checkbox>
    </van-checkbox-group>

    <!-- 编辑栏和提交栏 -->
    <van-submit-bar
      :price="checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isEditing">全选</van-checkbox>
      <template #tip>
        累计共<span>{{ goodsCount }}</span
        >件商品，可点击
        <van-button :type="isEditing?'danger':'primary'" size="small" @click="isEditing=!isEditing">{{isEditing?'完成编辑':'编辑'}}</van-button>
        按钮进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import { GetCartData, GetChecked } from "@/request/api";
import Tips from "@/components/Tips";
export default {
  data() {
    return {
      /* 全选的value值 */
      checked: true,
      /* 每个元素是checkbox-group的每一个checkbox的name属性 */
      result: [],
      cartList: [],
      checkedGoodsAmount: 0,
      goodsCount: 0,
      isEditing : false,
    };
  },
  components: {
    Tips
  },
  created() {
    GetCartData().then(res => {
      console.log(res.data);
      this.renderData(res.data);
    });
  },
  computed: {
    checkedAll: {
      get() {
        return this.cartList.length == this.result.length;
      },
      set(val) {
          let ids = this.cartList.map(item=>{
              return item.product_id
          })
        GetChecked({
          isChecked: val? 1 : 0,
          productIds:ids.join() 
        }).then(res => {
          console.log(res.data);
          this.renderData(res.data);
        });
      }
    }
  },
  methods: {
    onSubmit() {},
    renderData(data) {
      this.result = [];
      this.cartList = data.cartList;
      this.goodsCount = data.cartTotal.goodsCount;
      this.checkedGoodsAmount = data.cartTotal.checkedGoodsAmount;

      this.cartList.map(item => {
        item.checked ? this.result.push(item.id) : "";
      });
    },
    goodsItemClick(item) {
      GetChecked({
        isChecked: item.checked ? 0 : 1,
        productIds: item.product_id.toString()
      }).then(res => {
        console.log(res.data);
        this.renderData(res.data);
      });
    }
  }
};
</script>
 
<style lang="less" scoped>
.van-submit-bar {
  bottom: 0.5rem;
}
/deep/.van-checkbox__label {
  flex: 1;
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
  .van-button {
    margin: 0 0.06rem;
  }
}
.van-checkbox-group {
  background-color: #fff;
  padding: 0.1rem;
  border-bottom: 1px solid #ccc;
}
.van-checkbox-group[data-v-c028c34c] {
  padding-bottom: 1.6rem;
}
.van-stepper{
    text-align: right;
}
.van-checkbox{
    border-bottom: 1px solid #ccc;
    padding: 0.08rem 0;
}
</style>